<template>
  <svg
    :height="props.size"
    :style="{ flex: 'none', lineHeight: 1, ...props.style }"
    viewBox="0 0 24 24"
    :width="props.size"
    xmlns="http://www.w3.org/2000/svg"
    v-bind="$attrs"
  >
    <title>{{ TITLE }}</title>
    <path
      d="M6.897 4h-.024l-.031 2.615h.022c1.715 0 3.046 1.357 5.94 6.246l.175.297.012.02 1.62-2.438-.012-.019a48.763 48.763 0 00-1.098-1.716 28.01 28.01 0 00-1.175-1.629C10.413 4.932 8.812 4 6.896 4z"
      :fill="a.fill"
    />
    <path
      d="M6.873 4C4.95 4.01 3.247 5.258 2.02 7.17a4.352 4.352 0 00-.01.017l2.254 1.231.011-.017c.718-1.083 1.61-1.774 2.568-1.785h.021L6.896 4h-.023z"
      :fill="b.fill"
    />
    <path
      d="M2.019 7.17l-.011.017C1.2 8.447.598 9.995.274 11.664l-.005.022 2.534.6.004-.022c.27-1.467.786-2.828 1.456-3.845l.011-.017L2.02 7.17z"
      :fill="c.fill"
    />
    <path
      d="M2.807 12.264l-2.533-.6-.005.022c-.177.918-.267 1.851-.269 2.786v.023l2.598.233v-.023a12.591 12.591 0 01.21-2.44z"
      :fill="d.fill"
    />
    <path
      d="M2.677 15.537a5.462 5.462 0 01-.079-.813v-.022L0 14.468v.024a8.89 8.89 0 00.146 1.652l2.535-.585a4.106 4.106 0 01-.004-.022z"
      :fill="e.fill"
    />
    <path
      d="M3.27 16.89c-.284-.31-.484-.756-.589-1.328l-.004-.021-2.535.585.004.021c.192 1.01.568 1.85 1.106 2.487l.014.017 2.018-1.745a2.106 2.106 0 01-.015-.016z"
      :fill="f.fill"
    />
    <path
      d="M10.78 9.654c-1.528 2.35-2.454 3.825-2.454 3.825-2.035 3.2-2.739 3.917-3.871 3.917a1.545 1.545 0 01-1.186-.508l-2.017 1.744.014.017C2.01 19.518 3.058 20 4.356 20c1.963 0 3.374-.928 5.884-5.33l1.766-3.13a41.283 41.283 0 00-1.227-1.886z"
      fill="#0082FB"
    />
    <path
      d="M13.502 5.946l-.016.016c-.4.43-.786.908-1.16 1.416.378.483.768 1.024 1.175 1.63.48-.743.928-1.345 1.367-1.807l.016-.016-1.382-1.24z"
      :fill="g.fill"
    />
    <path
      d="M20.918 5.713C19.853 4.633 18.583 4 17.225 4c-1.432 0-2.637.787-3.723 1.944l-.016.016 1.382 1.24.016-.017c.715-.747 1.408-1.12 2.176-1.12.826 0 1.6.39 2.27 1.075l.015.016 1.589-1.425-.016-.016z"
      fill="#0082FB"
    />
    <path
      d="M23.998 14.125c-.06-3.467-1.27-6.566-3.064-8.396l-.016-.016-1.588 1.424.015.016c1.35 1.392 2.277 3.98 2.361 6.971v.023h2.292v-.022z"
      :fill="h.fill"
    />
    <path
      d="M23.998 14.15v-.023h-2.292v.022c.004.14.006.282.006.424 0 .815-.121 1.474-.368 1.95l-.011.022 1.708 1.782.013-.02c.62-.96.946-2.293.946-3.91 0-.083 0-.165-.002-.247z"
      :fill="i.fill"
    />
    <path
      d="M21.344 16.52l-.011.02c-.214.402-.519.67-.917.787l.778 2.462a3.493 3.493 0 00.438-.182 3.558 3.558 0 001.366-1.218l.044-.065.012-.02-1.71-1.784z"
      :fill="j.fill"
    />
    <path
      d="M19.92 17.393c-.262 0-.492-.039-.718-.14l-.798 2.522c.449.153.927.222 1.46.222.492 0 .943-.073 1.352-.215l-.78-2.462c-.167.05-.341.075-.517.073z"
      :fill="k.fill"
    />
    <path
      d="M18.323 16.534l-.014-.017-1.836 1.914.016.017c.637.682 1.246 1.105 1.937 1.337l.797-2.52c-.291-.125-.573-.353-.9-.731z"
      :fill="l.fill"
    />
    <path
      d="M18.309 16.515c-.55-.642-1.232-1.712-2.303-3.44l-1.396-2.336-.011-.02-1.62 2.438.012.02.989 1.668c.959 1.61 1.74 2.774 2.493 3.585l.016.016 1.834-1.914a2.353 2.353 0 01-.014-.017z"
      :fill="m.fill"
    />
    <defs>
      <linearGradient :id="a.id" x1="75.897%" x2="26.312%" y1="89.199%" y2="12.194%">
        <stop offset=".06%" stop-color="#0867DF" />
        <stop offset="45.39%" stop-color="#0668E1" />
        <stop offset="85.91%" stop-color="#0064E0" />
      </linearGradient>
      <linearGradient :id="b.id" x1="21.67%" x2="97.068%" y1="75.874%" y2="23.985%">
        <stop offset="13.23%" stop-color="#0064DF" />
        <stop offset="99.88%" stop-color="#0064E0" />
      </linearGradient>
      <linearGradient :id="c.id" x1="38.263%" x2="60.895%" y1="89.127%" y2="16.131%">
        <stop offset="1.47%" stop-color="#0072EC" />
        <stop offset="68.81%" stop-color="#0064DF" />
      </linearGradient>
      <linearGradient :id="d.id" x1="47.032%" x2="52.15%" y1="90.19%" y2="15.745%">
        <stop offset="7.31%" stop-color="#007CF6" />
        <stop offset="99.43%" stop-color="#0072EC" />
      </linearGradient>
      <linearGradient :id="e.id" x1="52.155%" x2="47.591%" y1="58.301%" y2="37.004%">
        <stop offset="7.31%" stop-color="#007FF9" />
        <stop offset="100%" stop-color="#007CF6" />
      </linearGradient>
      <linearGradient :id="f.id" x1="37.689%" x2="61.961%" y1="12.502%" y2="63.624%">
        <stop offset="7.31%" stop-color="#007FF9" />
        <stop offset="100%" stop-color="#0082FB" />
      </linearGradient>
      <linearGradient :id="g.id" x1="34.808%" x2="62.313%" y1="68.859%" y2="23.174%">
        <stop offset="27.99%" stop-color="#007FF8" />
        <stop offset="91.41%" stop-color="#0082FB" />
      </linearGradient>
      <linearGradient :id="h.id" x1="43.762%" x2="57.602%" y1="6.235%" y2="98.514%">
        <stop offset="0%" stop-color="#0082FB" />
        <stop offset="99.95%" stop-color="#0081FA" />
      </linearGradient>
      <linearGradient :id="i.id" x1="60.055%" x2="39.88%" y1="4.661%" y2="69.077%">
        <stop offset="6.19%" stop-color="#0081FA" />
        <stop offset="100%" stop-color="#0080F9" />
      </linearGradient>
      <linearGradient :id="j.id" x1="30.282%" x2="61.081%" y1="59.32%" y2="33.244%">
        <stop offset="0%" stop-color="#027AF3" />
        <stop offset="100%" stop-color="#0080F9" />
      </linearGradient>
      <linearGradient :id="k.id" x1="20.433%" x2="82.112%" y1="50.001%" y2="50.001%">
        <stop offset="0%" stop-color="#0377EF" />
        <stop offset="99.94%" stop-color="#0279F1" />
      </linearGradient>
      <linearGradient :id="l.id" x1="40.303%" x2="72.394%" y1="35.298%" y2="57.811%">
        <stop offset=".19%" stop-color="#0471E9" />
        <stop offset="100%" stop-color="#0377EF" />
      </linearGradient>
      <linearGradient :id="m.id" x1="32.254%" x2="68.003%" y1="19.719%" y2="84.908%">
        <stop offset="27.65%" stop-color="#0867DF" />
        <stop offset="100%" stop-color="#0471E9" />
      </linearGradient>
    </defs>
  </svg>
</template>

<script setup lang="ts">
import { useFillId } from "@/hooks/useFillId"
import { TITLE } from "../style"

defineOptions({
  name: "MetaColor",
  inheritAttrs: false,
})

interface Props {
  size?: string | number
  style?: Record<string, any>
}

const props = withDefaults(defineProps<Props>(), {
  size: "1em",
  style: () => ({}),
})

const fills = Array.from({ length: 13 }, (_, i) => useFillId(`${TITLE}-${i}`))
const [a, b, c, d, e, f, g, h, i, j, k, l, m] = fills
</script>
